
/*
 * @Author: jiu yin
 * @Date: 2023-04-27 14:23:19
 * @LastEditTime: 2023-06-02 17:19:17
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \AI admin\src\view\intention\index.tsx
 * jiu
 */
import { useState, useEffect } from 'react'
import './index.scss'
import { Space, Table, Tag, Tooltip, Modal, Button, Input, Switch, Form } from 'antd';
import type { ColumnsType } from 'antd/es/table';

import {useNavigate} from 'react-router-dom'

function Intention() {  
    const [form] = Form.useForm();
    let navigate = useNavigate()
    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        status: boolean
    }
    const SwitchOnchange = (checked: boolean, item: any) => {
        console.log(`Switch checked: ${checked}`, item);
        let arr = datas.map(i => {
            if (i.key === item.key) {
                return { ...i, status: checked }
            }
            return i
        })
        setDatas(arr)
    }

    const columns: ColumnsType<DataType> = [
        {
            title: '意图ID',
            dataIndex: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '描述',
            dataIndex: 'age',
            render: (_, item) => (
                <>
                    <Tooltip title={item.age}>
                        <p className='tableP'>{item.age}</p>
                    </Tooltip>
                </>
            ),
        },
        {
            title: '参数1',
            dataIndex: 'address',

        },
        {
            title: '参数2',
            dataIndex: 'address',

        },
        {
            title: '参数3',
            dataIndex: 'address',

        },
        {
            title: '状态',
            key: 'status',
            render: (_, item) => (
                <>
                    <Switch defaultChecked checked={item.status} onChange={(checked) => { SwitchOnchange(checked, item) }} />
                </>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: (_, item) => (
                <Space size="middle">
                    <a href='#' onClick={() => navigate("/instruct/intention/rule?id=1")}>详情</a>
                    <a href='#'>编辑</a>
                    <a href='#'>删除</a>
                </Space>
            ),
        },
    ];

    const data: DataType[] = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
            status: false,
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
            status: true,
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            status: false,
        },

    ];

    const [datas, setDatas] = useState(data)

    let searchInit = { dim: "" }
    const [search, setSearch] = useState(searchInit)

    //弹框
    const [isModalOpen, setIsModalOpen] = useState(false);


    //取消
    const cancel = () => {
        setIsModalOpen(false);
        form.resetFields();
    }

    //成功走得
    const onFinish = (values: any) => {
        console.log('Success:', values);
        let { password1, password2, password3 } = values
        let intentionParams = [password1, password2, password3].filter(item => { if (item) return item })
        console.log(intentionParams);

        // setIsModalOpen(false);
    };

    //失败走得
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
        // setIsModalOpen(false);
    };

    return (
        <div className='intention'>
            <div className='title'>
                <Button type="primary" onClick={() => setIsModalOpen(true)}>+ 新建正则意图</Button>
                <div className='search'>
                    <Input placeholder="模糊搜索关键字" className='input' value={search.dim} onChange={(e) => setSearch({ ...search, dim: e.target.value })} />
                    <Button type="primary" className='ml_10'>查询</Button>
                    <Button className='ml_10' onClick={() => setSearch(searchInit)}>重置</Button>
                </div>
            </div>
            <Table columns={columns} dataSource={datas} />


            <Modal title="新增意图规则信息" open={isModalOpen} onCancel={() => { cancel() }} keyboard footer={null}>

                <Form
                    name="basic"
                    labelCol={{ span: 6, offset: 2 }}
                    wrapperCol={{ span: 100 }}
                    style={{ maxWidth: 600, marginTop: "20px" }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    form={form}
                >
                    <Form.Item
                        label="意图"
                        name="username"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="意图参数"
                        name="password1"
                        rules={[{ required: true, message: 'Please input your password!' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label=" "
                        name="password2"
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label=" "
                        name="password3"
                    >
                        <Input />
                    </Form.Item>


                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                        <Button htmlType="button" onClick={() => { cancel() }} className='ml_10'>
                            取消
                        </Button>
                    </Form.Item>
                </Form>


            </Modal>
        </div>
    )
}

export default Intention
